<template>
  <div
    class="jxshop-block"
    :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
    <div class="leftBox">
		<div class="leftBox-title sa-line-1" :style="{color: compData.data.shop.color}">
			{{ compData.data.shop.text }}
		</div>
		<div class="leftBox-btn sa-line-1" :style="{color: compData.data.btn.color,background: compData.data.btn.bgColor}">
			{{ compData.data.btn.text }}
		</div>
		<img class="leftBox-roll" :src="checkUrl('/static/icon/roll.png')"  >
	</div>
	<div class="rightBox sa-flex">
		<div class="rightBox-item  sa-flex-col sa-col-center" >
			<sa-image :url="(compData.data?.hotGoodsList&&compData.data?.hotGoodsList.length>0) ? compData.data.hotGoodsList[0].image :''" size="50" radius="0" :suffix="null" />
			<div class="rightBox-item-title sa-line-1 " v-if="compData.data?.hotData" :style="{color: compData.data.hotData.color}">
				{{  compData.data.hotData.text}}
			</div>
		</div>
		<div class="rightBox-item  sa-flex-col sa-col-center" >
			<sa-image :url="(compData.data?.newGoodsList&&compData.data?.newGoodsList.length>0) ? compData.data.newGoodsList[0].image :''" size="50" radius="0" :suffix="null" />
			<div class="rightBox-item-title sa-line-1" v-if="compData.data?.newData"  :style="{color: compData.data.newData.color}">
				{{  compData.data.newData.text}}
			</div>
		</div>
		<div class="rightBox-item  sa-flex-col sa-col-center" >
			<sa-image :url="(compData.data?.seckillGoodsList&&compData.data?.seckillGoodsList.length) ? compData.data?.seckillGoodsList[0].image :''" size="50" radius="0" :suffix="null" />
			<div class="rightBox-item-title sa-line-1" v-if="compData.data?.seckillData"  :style="{color: compData.data.seckillData.color}">
				{{  compData.data.seckillData.text}}
			</div>
		</div>
	</div>
  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .jxshop-block {
    overflow: hidden;
	display: flex;
	height: 125px;
	.leftBox{
		padding: 15px 0 15px 15px;
		width: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.leftBox-title{
			font-size: 16px;
			font-weight: 600;
		}
		.leftBox-btn{
			width: 100%;
			margin-top: 10px;
			height: 22px;
			border-radius: 100px;
			text-align: center;
			font-size: 12px;
			line-height: 22px;
		}
		.leftBox-roll{
			width: 100px;
			height: 43px;
		}
	}
	.rightBox{
		width: calc(100% - 110px);
		margin-left: 10px;
		margin-top: 10px;
		.rightBox-item{
			width: 33%;
			.rightBox-item-title{
				margin-top: 8px;
				width: 100%;
				text-align: center;
				font-family: Source Han Sans;
				font-size: 14px;
				font-weight: 500;
				line-height: normal;
				text-align: center;
				letter-spacing: normal;
				color: #202020;
			}
			.rightBox-item-price{
				margin-top: 2px;
				width: 100%;
				text-align: center;
				font-family: Source Han Sans;
				font-size: 12px;
				font-weight: 500;
				line-height: normal;
				text-align: center;
				letter-spacing: normal;
				color: #FF5555;
			}
		}
	}
  }
</style>
